<!--
 * @Version: 1.0
 * @Autor:
 * @Date: 2021-03-10 16:57:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-09-07 10:50:22
 * @Description:
-->
<template>
  <el-card class="app-container content_box" shadow="always">
    <div>
      <!-- title -->
      <!-- <div class="header_title_box">
        <h2>货代付款管理</h2>
      </div> -->
      <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
      <div class="select_flex">
        <div></div>
        <div>
          <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
            重置
          </el-button>
          <el-button size="small" @click="isActive=!isActive">{{ isActive?'展开':'收起' }}</el-button>
        </div>
      </div>
      <div v-loading="loading" style="margin-top:10px">
        <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" :max-height="screenHeigh" border fit @selection-change="handleSelectMulti">
          <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable" />
          <el-table-column align="center" label="操作" width="250" fixed>
            <template slot-scope="sales">
              <span v-if="sales.row.pay_status!==1 && sales.row.audit_status!==1" v-action="'freightBill@freightOrderUpdate'" class="el-icon-edit-outline pointer blue" @click="$router.push({path: `/finance/forwaryderInfo/${sales.row.id}`, query: {title: '编辑货代付款', formData: JSON.stringify(sales.row)}})">编辑</span>
              <span v-if="sales.row.audit_status === 1 && sales.row.pay_status===0" v-action="'freightBill@pay'" size="small" type="success" class="pointer blue" @click="orderId=sales.row.id+'';formVisible=true;">
                录入实际付款
              </span>
              <span v-if="sales.row.audit_status !==1" v-action="'freightBill@changeAuditStatus'" size="small" type="primary" class="green_style" @click="orderNo=sales.row.payment_no+'';formVisibleA=true;formData=sales.row;orderId=sales.row.id">
                付款单审核
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="付款单号" prop="payment_no" width="170px">
            <template slot-scope="scope">
              <span class="pointer blue" @click="$router.push({path: `/finance/forwaryderInfo/${scope.row.id}`, query: {title: '货代付款详情', formData: JSON.stringify(scope.row)}})">
                {{ scope.row.payment_no }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="所属货代公司" prop="lforwarder_company" width="150px" show-overflow-tooltip />
          <el-table-column align="center" label="应付金额" prop="order_amount" />
          <el-table-column align="center" label="付款状态" prop="pay_status">
            <template slot-scope="scope">
              {{ scope.row.pay_status === 1 ? '已付款' : '待付款' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核状态" prop="audit_status">
            <template slot-scope="scope">
              {{ scope.row.audit_status === 1 ? '审核通过' : scope.row.audit_status === 0 ? '待审核' : '审核驳回' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核原因" prop="audit_status" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.audit_notes? scope.row.audit_notes : '-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="实际付款金额" prop="pay_amount" width="110px">
            <template slot-scope="scope">
              {{ scope.row.pay_amount !=='0' ? scope.row.pay_amount : '-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="实际付款时间" prop="pay_time" width="150px">
            <template slot-scope="scope">
              {{ scope.row.pay_time ? scope.row.pay_time : '-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="creator" label="操作人" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.creator?scope.row.creator:'-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="created_at" label="操作时间" width="169px">
            <template slot-scope="scope">
              {{ scope.row.created_at?scope.row.created_at :'-' }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <!-------- 回到顶部 ------------>
      <el-backtop :visibility-height="60">
        <i class="el-icon-caret-top" />
      </el-backtop>
      <!-- 审核 -->
      <el-dialog :center="true" title="审核" :visible.sync="formVisibleA" width="75%" @close="handleCancelDown">
        <div>
          <ForwarderInfo :id="orderNo" :form-data="formData" />
        </div>
        <div v-if="type==='1'" style="margin-top:30px">
          <div class="header_title_box">
            <h2 style="margin-right:50px">
              审核意见
            </h2>
          </div>
          <div>
            <el-form ref="ruleForm" :model="formExamine" :rules="rules" label-width="140px">
              <el-form-item prop="audit_status">
                <el-radio-group v-model="formExamine.audit_status">
                  <el-radio label="1">通过</el-radio>
                  <el-radio label="2">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="`${formExamine.audit_status==='1'? '通过说明': '驳回原因'}`">
                <el-input v-model="formExamine.audit_notes" type="textarea" autosize placeholder="请输入最多200字符" maxlength="200" show-word-limit />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="text-align: center; margin-top:50px">
          <el-button v-if="type==='1'" type="primary" :loading="isbtn" @click="submitFormA('ruleForm')">保存</el-button>
          <el-button @click="handleCancelDown">取消</el-button>
        </div>
      </el-dialog>
      <!-- 录入实际付款金额 -->
      <el-dialog :center="true" title="录入实际付款金额" :visible.sync="formVisible" width="600px" @close="handleCancel">
        <div>
          <el-form :ref="formName" :model="formFieldsData" :rules="rules" label-width="140px">
            <el-form-item prop="pay_time" label="实际付款时间">
              <el-date-picker v-model="formFieldsData.pay_time" type="date" value-format="timestamp" placeholder="选择日期" style="width:300px" />
            </el-form-item>
            <el-form-item label="实际付款金额" prop="pay_amount">
              <el-input v-model="formFieldsData.pay_amount" placeholder="请输入实际付款金额" style="width:300px" />
            </el-form-item>
          </el-form>
        </div>
        <div style="text-align: center; margin-top:50px">
          <el-button v-if="type==='1'" type="primary" :loading="isbtn" @click="submitFormPay">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>

</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import ForwarderInfo from '../compontent/forwarderInfo'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
import FormSelections from '@/components/FormSelection'
export default {
  name: 'FinanceForwarder',
  components: { ForwarderInfo, FormSelections },
  directives: {
    action
  },
  mixins: [formOperate],
  data() {
    return {
      otherHeight: 400,
      secondUrl: 1, // 二级路由
      componentName: 'FinanceForwarder',
      formItems: [
        {
          label: '付款单号',
          key: 'payment_no',
          type: 'input',
          placeholder: '请输入付款单号'
        },
        {
          label: '货代公司',
          key: 'lforwarder_company',
          type: 'input',
          placeholder: '请输入货代公司'
        },
        {
          label: '付款状态',
          key: 'pay_status',
          type: 'select',
          options: [
            {
              label: '待付款',
              value: '0'
            },
            {
              label: '已付款',
              value: '1'
            }
          ],
          placeholder: '选择付款状态'
        },
        {
          label: '审核状态',
          key: 'audit_status',
          type: 'select',
          options: [
            {
              label: '待审核',
              value: '0'
            },
            {
              label: '审核通过',
              value: '1'
            },
            {
              label: '审核驳回',
              value: '2'
            }
          ],
          placeholder: '选择审核状态'
        },
        {
          label: '操作时间',
          key: 'time',
          type: '',
          //   valueFormat: 'timestamp',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '请选择时间范围'
          //   wrap: true
        },
      ],
      orderNo: '',
      formData: {},
      formFieldsData: {
        pay_time: '',
        pay_amount: ''
      },
      formVisibleEnter: false,
      type: '1',
      formExamine: {
        audit_status: '1',
        audit_notes: ''
      },
      isbtn: false,
      orderId: '',
      url: '/freight-bill-orders',
      queryParam: {
        payment_no: '',
        lforwarder_company: '',
        start_at: '',
        end_at: '',
        time: '',
        pay_status: '',
        audit_status: ''
      },
      loading: false,
      formVisibleA: false,
      formName: 'createActualPayment',
      formLabelWidth: '150px',
      rules: {
        audit_status: [
          {
            required: true, message: '请选择审核意见', trigger: 'change'
          }
        ],
        pay_time: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        pay_amount: [
          { required: true, message: '请输入金额', trigger: 'change' },
          { pattern: /\d+(\.[0-9]{1,4}){0,1}$/, message: '只能输入数字,最多四位小数', trigger: 'change' }
        ]
      },
      cachePaths: [
        '/finance/forwaryderInfo'
      ]
    }
  },
  methods: {
    // 索搜前设置
    beforeSearch() {
      const vm = this
      if (vm.queryParam.time && vm.queryParam.time.length > 0) {
        vm.queryParam.start_at = vm.queryParam.time[0]
        vm.queryParam.end_at = vm.queryParam.time[1]
      }
    },
    // 录入
    submitFormPay() {
      this.$refs[this.formName].validate((valid) => {
        const data = { ...this.formFieldsData }
        data.pay_time = data.pay_time / 1000
        data.id = this.orderId
        if (valid) {
          this.$http.post(`/freight-bill-orders/pay`, data).then(response => {
            this.handleResponse(response)
            this.handleRefresh()
            this.orderId = null
          })
        } else {
          return false
        }
      })
    },
    // 审核
    submitFormA(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isbtn = true
          const data = this.formExamine
          data.id = this.orderId
          this.$http.post(`/freight-bill-orders/change-audit-status`, data).then((res) => {
            if (res.code === 10000) {
              this.$message.success('审核成功')
              this.handleRefresh()
              this.handleCancelDown()
            }
            this.isbtn = false
          }).catch(() => {
            this.isbtn = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 设置禁止选择项
    checkSelectable(row, index) {
      return row.status !== 1
    },
    // 关闭
    handleCancelDown() {
      this.formVisibleA = false
    }
  }
}

</script>

<style lang="scss" scoped>
</style>
